<template>
  <div class="headerNav" width=100%>

    <!-- 网站LOGO 名字 -->
    <el-row type="flex" class="row-bg">
    <div class="logoTitle">
      <img src="../assets/logo-small.png" alt="logo">
      <span>基于区块链的数字作品版权保护系统</span>
    </div>
    </el-row>

    <!-- 搜索框 -->

    <el-row class="row-bg">
      <el-input placeholder="开始搜索吧" v-model="searchInput" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="搜作者" value="1"></el-option>
          <el-option label="搜作品" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </el-row>

    <!-- 右上角导航栏 -->
    <el-row type="flex" class="row-bg">
    <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <!-- 探索其他作品 -->
      <el-menu-item :index="explore + userId">
        <el-button type="text">探索</el-button>
      </el-menu-item>
      <!-- 个人主页 -->
      <el-menu-item :index="home + userId">
        <el-button type="text">主页</el-button>
      </el-menu-item>
      <!-- 条件渲染 批量导入 -->
      <!-- <el-menu-item v-if="form.userType=='企业用户'"> -->
      <el-menu-item v-if="userType=='企业用户'">
        <el-button type="text" @click="importAreaVisible = true">批量导入</el-button>
        <el-dialog title="批量导入" :visible.sync="importAreaVisible">
          <el-upload drag action="" :before-upload="beforeImport" ref="newimport" :on-preview="handlePreview"
            :on-remove="handleRemove" :limit="1" accept=".csv" :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将<em>utf-8编码的csv文件</em>拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <p>说明：每行数据详细格式如下表，其中未注册的邮箱会自动注册，默认密码为123456。</p>
          <el-table :data="csvData">
            <el-table-column property="email" label="作者邮箱"></el-table-column>
            <el-table-column property="name" label="作者名" width="70px"></el-table-column>
            <el-table-column property="ftp" label="ftp连接参数(主机地址/端口/用户名/密码)" width="200"></el-table-column>
            <el-table-column property="description" label="作品描述"></el-table-column>
            <el-table-column property="address" label="作品地址"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="importAreaVisible = false">取消上传</el-button>
            <el-button type="primary" @click="newImportForm">开始上传</el-button>
          </div>
        </el-dialog>
      </el-menu-item>
      <!-- 作品上传 -->
      <el-menu-item>
        <el-button type="text" @click="uploadAreaVisible = true">上传</el-button>
        <el-dialog title="作品上传" :visible.sync="uploadAreaVisible">
          <el-upload
          drag action=""
          :before-upload="beforeUpload"
          ref="newupload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :limit="1"
          :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <el-input type="textarea" class="description" :rows="2" placeholder="请输入作品描述(可选)" v-model="textarea" />
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadAreaVisible = false">取消上传</el-button>
            <el-button type="primary" @click="newSubmitForm" >开始上传</el-button>
          </div>
        </el-dialog>
      </el-menu-item>
      <!-- 消息中心 -->
      <el-menu-item :index="messageCenter+userId">
        <el-button type="text">
          <el-badge :is-dot="!msgStatus" class="item">通知</el-badge>
        </el-button>
        <!-- <el-dropdown>
        <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item>管理员驳回了您的上诉....</el-dropdown-item>
                  <el-dropdown-item>您的作品上传成功，详....</el-dropdown-item>
                  <el-dropdown-item command="toMessageCenter">查看全部消息</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown> -->
      </el-menu-item>
      <!-- 个人信息中心 -->
      <el-submenu index="/aboutUser">
        <el-avatar :src="form.userAvtar" slot="title"></el-avatar>
        <el-menu-item :index="userCenter + userId">个人中心</el-menu-item>
        <el-menu-item @click="signOut">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    </el-row>
  </div>
</template>

<script>

export default {
  // inject: ['reload'],
  data () {
    return {
      csvData: [{
        email: 'zhangsan@qq.com',
        name: '张三',
        ftp: '1.1.1.1/21/admin/123465',
        description: '作品内容主要是保护地球',
        address: '/root/保护地球.txt'
      }],
      form: {
        userName: '',
        userType: '个人用户',
        userAvtar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      options: [{
        value: '选项1',
        label: '按作者'
      }, {
        value: '选项2',
        label: '按作品名'
      }
      ],
      searchInput: '',
      select: '1',
      activeIndex: '/homework',
      // activeIndex2: '1',
      uploadAreaVisible: false,
      importAreaVisible: false,
      textarea: '',
      home: '/homework/',
      messageCenter: '/messageCenter/',
      userCenter: '/userCenter/',
      doUpload: '/user/upload',
      explore: '/explore/',
      profile: ''
    }
  },
  props: {
    userId: {
      required: true
    },
    userType: {
      required: true
    },
    msgStatus: {
      required: true
    }
  },
  mounted () {
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.timer = setInterval(() => {
        this.getMsgStatus()
      }, 50000)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    // 监听右上角导航栏
    handleSelect (key, keyPath) {
      console.log(this.userId)
      console.log(key, keyPath)
    },
    // 搜索
    search () {
      if (this.searchInput !== '') {
        this.$router.push('/home/' + this.userId + '/search/' + this.select + '/' + this.searchInput)
        window.location.reload()
      } else {
        alert('请输入搜索内容')
      }
    },
    // 上传功能
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    beforeImport (file) {
      const fdImport = new FormData()
      if (file.size / 1024 / 1024 < 20) {
        fdImport.append('file', file)// 传csv文件
        this.$axios.post('/user/import', fdImport)
          .then((res) => {
            console.log(res)
            if (res.data.data === true) {
              // this.$message({
              //   type: 'success',
              //   message: res.data.msg
              // })
              alert(res.data.msg)
              this.$router.go(0)
              // this.reload()
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(function (error) { console.log(error) })
      } else {
        this.$message.warning('上传的文件需小于20MB!')
      }
    },
    // 上传文件
    beforeUpload (file) {
      const fd = new FormData()
      if (file.size / 1024 / 1024 < 20) {
        fd.append('file', file)// 传文件
        this.profile = this.textarea
        console.log(this.profile)
        fd.append('profile', this.profile)// 传作品简介
        fd.append('userId', this.userId)// 传作者ID
        // this.$axios.post('/user/upload', fd).then(function (res) {
        //   alert('成功')
        // })
        this.$axios.post('/user/upload', fd)
          .then((res) => {
            console.log(res)
            if (res.data.data === true) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
              this.$router.go(0)
              // this.reload()
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(function (error) { console.log(error) })
      } else {
        this.$message.warning('上传的文件需小于20MB!')
      }
    },
    newImportForm () {
      this.$refs.newimport.submit()
      this.importAreaVisible = false
      this.$refs.newimport.clearFiles()
    },
    newSubmitForm () { // 确定上传
      this.$refs.newupload.submit()
      this.uploadAreaVisible = false
      this.$refs.newupload.clearFiles()
    },
    // 消息
    getMsgStatus () {
      this.$axios.get('/user/getMsgStatus', {
        params: {
          userId: this.userId
        }
      }).then(res => {
        console.log(res)
        this.msgStatus = res.data.data
        console.log(this.msgStatus)
      }).catch(err => {
        if (err.response) {
          // console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          } else if (err.response.status >= 500) {
            alert('服务端接口出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    // 监听退出登录按钮
    signOut () {
      this.$confirm('您确定要退出吗?', '退出当前账号', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // 注销用户信息之后
        // 返回welcome登录页面
        this.$router.push('/welcome')
        // const info = { userkey: localStorage.getItem('userKey') }
        // self.$store.dispatch('LogOut', info).then(() => { self.$router.push({ path: '/Login' }) }).catch(() => {})
      }).catch(() => {
        // 取消退出登录
      })
    }
  }
}
</script>

<style lang="less" scoped>
.headerNav {
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 20px;
  .logoTitle {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
  .input-with-select .el-input-group__prepend {
    .el-select {
      width: 100px;
    }
    background-color: #fff;
    margin-right: 15px;
  }
}

.bell {
  margin-top: 10px;
  margin-right: 40px;
}

.el-menu{
  float: right
}

</style>
